<template>
  <div class="Safetycheck">
    <van-form validate-first>
      <div class="first-list">
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 1px solid #d2d2d2;
            color: black;
          "
        >
          <span style="color: #ff0000">*</span>
          <van-field v-model="formData1.SBR" :readonly="isreadonsly1" placeholder="请输入报人姓名" label="上报人姓名" />
        </div>
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 1px solid #d2d2d2;
            color: black;
          "
        >
          <span style="color: #ff0000">*</span>
          <van-field
            v-model="formData1.SBRSFZH"
            :readonly="isreadonsly1"
            placeholder="请输入上报人身份证号"
            label="上报人身份证号"
          />
        </div>
        <div style="display: flex; justify-content: center; align-items: center; color: black">
          <span style="color: #ff0000">*</span>
          <van-field
            v-model="formData1.SBRDH"
            :readonly="isreadonsly1"
            placeholder="请输入上传人电话"
            label="上传人电话"
          />
        </div>
      </div>
      <div class="first-list-border"></div>
      <div class="first-list">
        <p class="subTitle"><span class="line"></span>房屋地址</p>
        <div style="display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #d2d2d2">
          <span style="color: #ff0000">*</span>
          <van-field
            :readonly="isreadonsly1"
            clickable
            name="picker"
            :value="ValueCity"
            label="所属市"
            placeholder="请选择所属市"
            @click="showPickerC = true"
          />
          <van-popup v-model="showPickerC" position="bottom" get-container="#popup">
            <van-picker
              show-toolbar
              :columns="CityColumns"
              value-key="cityname"
              @confirm="onConfirmCity"
              @cancel="showPickerC = false"
            />
          </van-popup>
        </div>
        <div style="display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #d2d2d2">
          <span style="color: #ff0000">*</span>
          <van-field
            :readonly="isreadonsly1"
            clickable
            name="picker"
            :value="valueXian"
            label="所属县(区)"
            placeholder="请选择所属县(区)"
            @click="showPickerX = true"
          />
          <van-popup v-model="showPickerX" position="bottom" get-container="#popup">
            <van-picker
              show-toolbar
              :columns="XianColumns"
              value-key="cityname"
              @confirm="onConfirmXian"
              @cancel="showPickerX = false"
            />
          </van-popup>
        </div>
        <div style="display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #d2d2d2">
          <span style="color: #ff0000">*</span>
          <van-field
            :readonly="isreadonsly1"
            clickable
            name="picker"
            :value="valueZhen"
            label="所属镇"
            placeholder="请选择所属镇"
            @click="showPickerT = true"
          />
          <van-popup v-model="showPickerT" position="bottom" get-container="#popup">
            <van-picker
              show-toolbar
              :columns="TownColumns"
              value-key="cityname"
              @confirm="onConfirmTown"
              @cancel="showPickerT = false"
            />
          </van-popup>
        </div>
        <div style="display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #d2d2d2">
          <span style="color: #ff0000">*</span>
          <van-field
            :readonly="isreadonsly1"
            clickable
            name="picker"
            :value="valueCun"
            label="所属村"
            placeholder="请选择所属村"
            @click="showPickerCun = true"
          />
          <van-popup v-model="showPickerCun" position="bottom" get-container="#popup">
            <van-picker
              show-toolbar
              :columns="CunColumns"
              value-key="cityname"
              @confirm="onConfirmCun"
              @cancel="showPickerCun = false"
            />
          </van-popup>
        </div>
        <div style="display: flex; justify-content: center; align-items: center">
          <span style="color: #ff0000">*</span>
          <van-field v-model="formData1.XXDZ" label="详细地址" placeholder="详细地址" />
        </div>
      </div>
      <div class="first-list-border"></div>
      <div class="first-list">
        <p class="subTitle"><span class="line"></span>房屋安全自查</p>
        <div class="phoneARR" v-for="(item, index) in ArrPhone" :key="index" v-viewer>
          <div style="border-bottom: 1px solid #d2d2d2; margin-top: 20px">
            <div>
              {{ item.name }}
            </div>
            <div style="display: flex; justify-content: space-around; margin-left: 10px">
              <div class="phoneARR-left" style="width: 50%; margin: 13px 0">
                <img :src="item.photo1" alt="" width="96%" />
                <span style="font-size: 14px">{{ item.name1 }}</span>
              </div>
              <div class="phoneARR-right" style="width: 50%; margin: 13px 0">
                <img :src="item.photo2" alt="" width="96%" />
                <span style="font-size: 14px; text-align: center">
                  {{ item.name2 }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="first-list-border"></div>
      <div class="first-list">
        <p class="subTitle"><span class="line"></span>自查结论</p>
        <div style="display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #d2d2d2">
          <span style="color: #ff0000">*</span>
          <van-field
            :readonly="isreadonsly1"
            clickable
            name="picker"
            :value="Value12"
            label="有无以上房屋安全问题"
            placeholder="请选择有或者无"
            @click="showPicker12 = true"
          />
          <van-popup v-model="showPicker12" position="bottom" get-container="#popup">
            <van-picker
              show-toolbar
              :columns="CityColumn12"
              value-key="cityname"
              @confirm="onConfirm12"
              @cancel="showPicker12 = false"
            />
          </van-popup>
        </div>
        <div style="padding: 8px 0; border-bottom: 1px solid #d2d2d2">
          <span style="color: #ff0000">*</span>
          <span style="font-size: 14px; margin-left: 9px">照片上传</span>
          <div style="margin: 10px 20px">
            <van-uploader
              v-model="fileList"
              accept="image/jpeg, image/png, image/jpg, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, application/pdf"
              :after-read="afterRead"
              :max-count="10"
            />
          </div>
        </div>
      </div>
    </van-form>
    <div @click="handleSave">

      <van-button style="width: 95vw; margin: 10px auto" type="primary">提交</van-button>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.Safetycheck {
  height: 100vh;
  width: 100vw;
  padding: 10px;
  overflow-y: auto;
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  background: #ffff;
  .first-list {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  }
  .first-list-border {
    width: 100vw;
    height: 16px;
    background: #eee;
    margin-left: -10px;
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  }
  .subTitle {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #9b9b9b;
    padding-left: 10px;
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
    .line {
      width: 6px;
      height: 26px;
      background: #3f8ffc;
      display: inline-block;
      margin-right: 10px;
      font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
    }
  }
}
</style>

<style>
.Safetycheck .van-field__control {
  text-align: right !important;
}
.Safetycheck .van-field__label {
  width: 10em;
}
</style>


<script>
import { getDatalistForTree, QuerySignCallback, dataTransFile,ossUploadFiles } from '@/utils/api'
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
import Vue from 'vue'
import getUUID from 'gdt-jsapi/getUUID'
Vue.use(VueViewer)
export default {
  data() {
    return {
      formData1: {
        SBR: this.plusXing(window.localStorage.getItem('DanDianName'), 0, 0),//上报人
        SBRSFZH: this.plusXing(window.localStorage.getItem('DanDianid'), 6, 8),//上报人身份证号
        SBRDH: this.plusXing(window.localStorage.getItem('DanDianPhone'), 3, 5),//上报人电话
        SBSJ: '',//上报时间
        SBAJBH: '',//上报案卷编号
        SSDS: '',//所属地市 citycode
        SSQX: '',//所属区县cirtcode
        SSXZ: '',//所属乡镇
        SSC: '',//所属村
        XXDZ:"",//详细地址
        YWFWWANWT:"",//有无房屋安全
        SNC:"",//市名称
        QXMC:"",//区县名称
        ZXMC:"",//乡镇名称
        CMC:"",//村名称
      },
      ArrPhone: [
        {
          name: '1）地基不均匀沉降（常见于除土木结构外的所有结构形式建筑）',
          name1: '砌体结构承重墙体不均匀沉降裂缝',
          name2: '室外地坪不均匀沉降',
          photo1: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/61%20(14).png',
          photo2: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/61%20(15).png',
        },
        {
          name: '2）明显裂缝（常见于砖混结构建筑）',
          name1: '砌体结构斜裂缝（砖已剪切破坏）',
          name2: '明显裂缝',
          photo1: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/61%20(16).png',
          photo2: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/61%20(1).png',
        },
        {
          name: '3）倾斜、变形（常见于所有结构形式建筑）',
          name1: '钢柱弯曲变形',
          name2: '木柱倾斜变形',
          photo1: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/61%20(2).png',
          photo2: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/61%20(3).png',
        },
        {
          name: '4）破坏承重墙（常见于除框架结构外的所有结构形式建筑）',
          name1: '承重墙示意图',
          name2: '承重墙破坏',
          photo1: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/61%20(4).png',
          photo2: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/61%20(5).png',
        },
        {
          name: '5）拆改梁柱（常见于砖混结构、框架结构建筑）',
          name1: '破坏混凝土柱',
          name2: '擅自在梁上开孔',
          photo1: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/61%20(6).png',
          photo2: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/61%20(7).png',
        },
        {
          name: '6）木构件或钢筋腐蚀',
          name1: '屋架顶部、端部节点产生腐朽',
          name2: '柱脚腐朽',
          photo1: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/61%20(8).png',
          photo2: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/61%20(9).png',
        },
        {
          name: '7）违规增加使用荷载',
          name1: '大量堆载',
          name2: '私自将高楼层住宅变仓库',
          photo1: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/61%20(10).png',
          photo2: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/61%20(11).png',
        },
        {
          name: '8）其他',
          name1: '私自加层',
          name2: '私挖地下室',
          photo1: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/61%20(12).png',
          photo2: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/61%20(13).png',
        },
      ],
      showPicker12: false,
      valueXiang: '',

      Value12: '',
      showPickerT: false,
      showPickerC: false,
      showPickerX: false,
      showPickerCun: false,
      isreadonsly1: true,
      fileList: [],
      showList: false,
      showGRSQ: true,
      showEdition: false,
      showPickerJFLY: false,
      //控制网页端可以自动填写
      showPickerJFLY1: false,
      ISshowNow: false,
      phone: window.localStorage.getItem('DanDianPhone')
        ? this.plusXing(window.localStorage.getItem('DanDianPhone'), 3, 5)
        : '',
      idCard: window.localStorage.getItem('DanDianid')
        ? this.plusXing(window.localStorage.getItem('DanDianid'), 6, 8)
        : '',
      ValueCity: '',
      valueXian: '',
      valueZhen: '',
      valueCun: '',
      buildtype: '',
      If_ljf: '',
      ValueCity1: '',
      valueXian1: '',
      valueZhen1: '',
      valueCun1: '',
      ValueCity2: '',
      valueXian2: '',
      valueZhen2: '',
      valueCun2: '',
      ValueCity3: '',
      valueXian3: '',
      valueZhen3: '',
      CityColumn12: [
        {
          cityname: '有',
          citycode: 1,
        },
        {
          cityname: '无',
          citycode: 0,
        },
      ],
      valueCun3: '',
      buildtype1: '',
      If_ljf1: '',
      nowIndex: 0,
      dialogTitle: '',
      showDialog: false,
      text: '',
      IsLG: '',
      fileGuid: [],
      XianColumns: [],
      CityColumns: [],
      TownColumns: [],
      CunColumns: [],
      formData: {
        SBR: window.localStorage.getItem('DanDianName'),//上报人
        SBRSFZH: window.localStorage.getItem('DanDianid'),//上报人身份证号
        SBRDH: window.localStorage.getItem('DanDianPhone'),//上报人电话
        SBSJ: '',//上报时间
        SBAJBH: '',//上报案卷编号
        SSDS: '',//所属地市 citycode
        SSQX: '',//所属区县cirtcode
        SSXZ: '',//所属乡镇
        SSC: '',//所属村
        XXDZ:"",//详细地址
        YWFWWANWT:"",//有无房屋安全
        SNC:"",//市名称
        QXMC:"",//区县名称
        ZXMC:"",//乡镇名称
        CMC:"",//村名称
      },
    }
  },
  methods: {
    handleSave: async function () {
      this.formData1.ROW_GUID= this.ROW_GUID;
      let params = {
        accessCode: '0fb3f6123d1b4fe6851c99532c463f6f',
        cityCode: window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '',
        params: {
          dataGuid: '8026cb98-ad47-4d9b-8d96-b12f0c1bc149',
          strParams: JSON.stringify([this.formData1]),
        },
      }
      const res1 = await QuerySignCallback(params)
      if (JSON.parse(res1.data.data).Success) {
        //this.$toast.success('保存成功')
        this.SubmitEvent();
      } else {
        this.$toast.success('保存失败')
      }
    },
    //发送接口
    SubmitEvent() {
      this.$router.push({
        path: '/TreeSelectAutoSend',
        query: { data: this.formData1, IsnhzcAdd:true},
      })
    },
    getCityOpenDataView: async function () {
      this.CityColumns = []
      const res = await getDatalistForTree('330000000000')
      this.CityColumns = res.data.data
    },
    getXianOpenDataView: async function (data) {
      this.XianColumns = []
      const res = await getDatalistForTree(data)
      this.XianColumns = res.data.data
    },
    getTownOpenDataView: async function (data) {
      this.TownColumns = []
      const res = await getDatalistForTree(data)
      this.TownColumns = res.data.data
    },
    getCunOpenDataView: async function (data) {
      this.CunColumns = []
      const res = await getDatalistForTree(data)
      this.CunColumns = res.data.data
    },
    afterRead(file) {
      this.getFileServerUpload(file.file)
    },
    getFileServerUpload: async function (file) {
      // let data1 = {}
      // data1 = {
      //    toRowGuid: this.ROW_GUID,
      //   groupGuid: '157388a8-f61d-4cd0-851c-9d915f662897',
      //   token: window.localStorage.getItem('token'),
      // }
      // let formData = new FormData()
      // formData.append('file', file)
      // formData.append('accessCode', '7a3fc061c866434b8475d3775c9ddcea')
      // formData.append(
      //   'cityCode',
      //   window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '441300000000'
      // )
      // formData.append('paramStr', JSON.stringify(data1))
      // const res = await dataTransFile(formData)
      // let data2 = JSON.parse(res.data.data).FileList
      // this.fileGuid = data2[0].FILEGUID
      // if (this.fileGuid) {
      //   this.$toast.success('上传成功!')
      // }
      let formData = new FormData()
      formData.append('files', file)
      formData.append('path', 'NHAQZC')
      formData.append('groupName', '农户安全自查')
      formData.append('toGroupGuid', '123')
      const res = await ossUploadFiles(formData)
      let data2 = res.data.data
      this.fileGuid.push(data2[0].id)
      this.$toast.success('上传成功!')
    },
    plusXing(str, frontLen, endLen) {
      //浙里办新规则
      if (str.length<9) {
        return'*' + str.substring(1, str.length) //截取name 字符串截取第一个字符
      } else if (str.length > 9&&str.length<18) {
        return str.substring(0, 3) + '****' + str.substring(7, str.length) //截取第一个和大于第4个字符
      } else{
        return str.substring(0, 1) +'****************'+ str.substring(str.length-1, str.length)
      }
    },
    onConfirm12(value) {
      this.formData1.YWFWANWT = value.citycode
      this.Value12 = value.cityname
      this.showPicker12 = false
    },
    onConfirmCity(value) {
      this.cityCode = value.citycode
      this.ValueCity = value.cityname
      this.formData1.SSDS = value.citycode
      this.formData1.SNC=value.cityname
      this.showPickerC = false
      this.getXianOpenDataView(value.citycode)
    },
    onConfirmXian(value) {
      this.valueXian = value.cityname
      this.formData1.SSQX = value.citycode
      this.formData1.QXMC=value.cityname
      this.showPickerX = false
      this.getTownOpenDataView(value.citycode)
    },
    onConfirmTown(value) {
      this.valueZhen = value.cityname
      this.formData1.SSXZ = value.citycode
      this.formData1.ZXMC=value.cityname;
      this.showPickerT = false
      this.getCunOpenDataView(value.citycode)
    },
    onConfirmCun(value) {
      this.valueCun = value.cityname
      this.formData1.SSC = value.citycode
      this.formData1.CMC=value.cityname
      //   this.formDataGJ.CCITY = value.citycode;
      this.showPickerCun = false
    },
      getuuid() {

      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
      }
      function guid() {
        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
      }
      return guid();
    },
  },
  mounted() {
    this.ROW_GUID=this.getuuid();
    console.log("rowGuid"+this.ROW_GUID)
    this.getCityOpenDataView()
  },
}
</script>
